<template>
	<div>
		<Header></Header>
		<!-- 内容 -->
		<div class="w65 ma">
			<!-- 面包屑 -->
			<breadcrumb></breadcrumb>
		</div>
		<div class="conent-top">
			<div style="display: flex; justify-content: space-between; width: 99%;">
				<div class="fwb fz1 p05lr0">基础信息</div>
				<div>
					<el-button size="mini" icon="el-icon-location" type="primary" @click="toMaps">智能地图</el-button>
					<el-button
						size="mini"
						style="background-color: #2f6bbb;color: #ffffff;border: 1px solid #2f6bbb;"
						:icon="showTables ? 'el-icon-circle-close' : 'el-icon-circle-check'"
						@click="showTableClick"
					>
						{{ showTable }}
					</el-button>
				</div>
			</div>
			<table>
				<tr v-for="(item, index) in getDetails" :key="index">
					<td class="fwb" style="width: 70%;">{{ item.remarks }}</td>
					<td>{{ item.value }}</td>
				</tr>
				<tr v-if="$route.query.stype != 2">
					<td class="fwb">相关电子文件</td>
					<td>
						<el-row :gutter="17">
							<el-col :span="3" class="c14a cp fwb w100">
								<div v-if="getFiles == null">暂无文件</div>
								<div v-else @click="download">下载</div>
							</el-col>
						</el-row>
					</td>
				</tr>
			</table>

			<!-- <div class="fwb fz1 p05lr0">相关电子文件</div>
			<table>
				<tr>
					<td>
						<el-row :gutter="17">
							<el-col :span="3" class="c14a cp fwb w100" style="text-align: right;">
								<div v-if="getFiles == ''">暂无文件</div>
								<div v-else @click="download">下载</div>
							</el-col>
						</el-row>
					</td>
				</tr>
			</table> -->
		</div>
		<!-- 查看大图 -->
		<dialogImg :lookImg="lookImg" :biggerImg="biggerImg" @handleClose="handleClose" v-if="biggerImg"></dialogImg>
		<!-- 底部 -->
		<Footer></Footer>
	</div>
</template>

<script>
import breadcrumb from '@/components/breadcrumb .vue';
import dialogImg from '@/components/dialogImg.vue';
import { informationFilesInfo } from '@/api/resourceCenter.js';
export default {
	name: 'dataFielDetail', //资源
	components: {
		breadcrumb,
		dialogImg
	},
	data() {
		return {
			biggerImg: false,
			showTables: false,
			lookImg: '',
			showTable: '全显',
			getFiles: '',
			getDetails: []
		};
	},
	created() {
		this.getData(0);
	},
	methods: {
		getData(display) {
			let data = {
				id: this.$route.query.data,
				type: this.$route.query.stype,
				display
			};
			informationFilesInfo(data).then(res => {
				console.log(res);
				this.getDetails = res.data.list;
				this.getFiles = res.data.files;
			});
		},
		browse() {
			this.biggerImg = true;
		},
		handleClose(val) {
			this.biggerImg = val;
		},
		showTableClick() {
			this.showTables = !this.showTables;
			if (this.showTables) {
				this.showTable = '隐藏';
				this.getData(1);
			} else {
				this.showTable = '全显';
				this.getData(0);
			}
		},
		toMaps() {
			this.$router.push({
				path: '/monster',
				query: {
					id: this.$route.query.data,
					type: this.$route.query.stype,
					checked: true
				}
			});
		},
		//下载
		download() {
			let alink = document.createElement('a');
			alink.href = this.getFiles;
			alink.download = '相关文件'; //图片名
			alink.click();
		}
	}
};
</script>

<style scoped lang="scss">
.conent-top {
	width: 65%;
	min-height: 50rem;
	height: 100%;
	padding-bottom: 1rem;
	margin: auto;
	// overflow-y: auto;
}
table {
	width: 99%;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	// margin: 0;
	border-collapse: collapse;
	border-spacing: 0;
}
/*控制cellspacing*/
table td {
	width: 1.5rem;
	padding: 0.7rem;
	font-size: 0.9rem;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
</style>
